<template>
  <div class="main">
    <div class="content">
      <div class="information">
        <el-form ref="form" :model="information">
          <el-form-item label="餐馆id：">
            <el-input v-model="information.id" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="餐馆名称：">
            <el-input v-model="information.name" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="描述：">
            <el-input type="textarea" :rows="2" v-model="information.description"></el-input>
          </el-form-item>
          <el-form-item label="馆主id：">
            <el-input v-model="information.masterId" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="地点：" v-show="!isChange">
            <el-input v-model="information.placeName"></el-input>
          </el-form-item>
          <el-form-item label="地点：" v-show="isChange">
            <el-select v-model="place" @change="getPlaceId">
              <el-option v-for="place in placeList" :key="place.id" :label="place.name" :value="place.id"></el-option>
            </el-select>
          </el-form-item>

        </el-form>
        <div class="button-wrap">
          <div class="button">
            <el-button type="primary" v-show="!isChange" @click="isChange=true">修改信息</el-button>
            <el-button type="primary" v-show="isChange" @click="isChange=false">查看信息</el-button>
            <el-button type="success" v-show="isChange" @click="updateRestaurant">提交信息</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


import {allPlaces} from "@/http/api/place";
import {getInformation, setInformation} from "@/http/api/restaurant";
import cookie from "js-cookie";

export default {
  name: "Information",
  data() {
    return {

      // 餐馆信息
      information: {
        id: '',
        name: '',
        description: '',
        masterId: '',
        placeId: '',
        placeName: ''
      },

      // 地点列表
      placeList: [],
      place: '1',

      // 是否在修改状态
      isChange: false,
    }
  },

  methods: {

    // 获取地点信息
    async getPlaceList() {
      let result = await allPlaces()
      if (result.code === 0) {
        this.placeList = result.data
      }
    },

    // 获取餐馆信息
    async getRestaurant() {
      let result = await getInformation({
        restaurantId: cookie.get("restaurantId")
      })
      if (result.code === 0) {
        this.information.id = result.data.id
        this.information.name = result.data.name
        this.information.description = result.data.description
        this.information.placeId = result.data.place_id
        this.information.masterId = result.data.master_id
      }
    },

    // 获取地点id
    getPlaceId() {
      if (!this.placeList) {
        return
      }
      for (let i = 0; i < this.placeList.length; i ++) {
        if (this.placeList[i].id === this.place) {
          this.information.placeId = this.placeList[i].id
          this.information.placeName = this.placeList[i].name
        }
      }
    },

    // 获取地点名称
    getPlaceName() {
      for (let i = 0; i < this.placeList.length; i ++) {
        if (this.placeList[i].id === this.information.placeId) {
          this.information.placeName = this.placeList[i].name
        }
      }
    },

    // 修改餐馆信息
    async updateRestaurant() {
      let result = await setInformation({
        restaurantId: this.information.id,
        description: this.information.description,
        placeId: this.information.placeId,
      })
      if (result.code === 0) {
        this.$message.success("修改成功")
      }
    },
  },

  async mounted() {
    await this.getPlaceList()
    await this.getRestaurant()
    this.getPlaceName()
  }
}
</script>